<template>
    <div class="content" v-loading="loading">
        <!--头部-->
        <div class="header-setting">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>系统设置</a-breadcrumb-item>
                <a-breadcrumb-item>用户组管理</a-breadcrumb-item>
            </a-breadcrumb>
            <!--查询条件-->
            <div class="box-condition-body">
                <div class="box-condition-item" style="padding-top: 20px">
                    <div style=" display: flex; justify-content: space-between; align-items: center;">
                        <div style="margin: 0 15px 0 50px">用户组名称</div>
                        <template>
                            <a-input-search
                                    placeholder="用户组名称"
                                    style="width: 200px"
                                    @change="delayedTime"
                                    v-model="searchName"
                            />
                        </template>
                    </div>

                    <div style=" display: flex; justify-content: space-between; align-items: center;">
                        <div style="margin: 0 15px 0 50px">用户组类型</div>
                        <template>
                            <a-select
                                    showSearch
                                    placeholder="用户组类型"
                                    optionFilterProp="children"
                                    style="width: 200px"
                                    :allowClear="allowClear"
                                    @select="selectUserGroupType"
                            >
                                <a-select-option
                                        v-for="p in userGroupTypeOption"
                                        :key="p.value"
                                        :value="p.value"
                                >{{ p.label }}
                                </a-select-option>
                            </a-select>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <!--表单-->
        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div></div>
                <div style="display: flex">
                    <a-button type="primary" @click="addTap()">添加用户组</a-button>
                </div>
            </div>

            <!--数据表格-->
            <div class="box-table">
                <a-table
                        :columns="columns"
                        rowKey="id"
                        :dataSource="dataSource"
                        :pagination="pagination"
                        bordered
                        size="small"
                        :scroll="scroll"
                        :customRow="customRow"
                        :rowClassName="setRowClassName"
                        @change="tableChange"
                >
                    <template slot="userGroupType" slot-scope="text">
                        <template v-if="text == 1"> 活动类</template>
                    </template>

                    <template slot="isValid" slot-scope="text">
                        <template v-if="text == 1">
                            <font style="color: #00ff00"> 启用</font>
                        </template>
                        <template v-else>
                            <font style="color: #ff0000"> 禁用</font>
                        </template>
                    </template>

                    <template slot="cId" slot-scope="text, record">
                        <template v-if="text != null">
                            <a-popconfirm
                                    title="确认删除？"
                                    okText="确认"
                                    cancelText="取消"
                                    @confirm="deleteOk(text)"
                                    placement="topLeft"
                            >
                                <a-button type="danger" style="margin-right: 0.05rem">删除
                                </a-button>
                            </a-popconfirm>
                            <a-button
                                    type="primary"
                                    @click="bindCustomer(record)"
                                    style="margin-right: 0.05rem"
                            >绑定用户
                            </a-button>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>

        <!-- 修改用户组的弹窗 -->
        <a-modal
                :title="title"
                v-model="dispatchPopupData.visible"
                :confirmLoading="dispatchPopupData.loading"
                @cancel="
        () => {
          this.hideDispatchPopup();
        }
      "
                @ok="insertOrUpdateUserGroup"
        >
            <a-row style="margin-top: 0.5em">
                <a-col :span="6">用户组名称</a-col>
                <a-col :span="16">
                    <a-input
                            style="width: 70%"
                            placeholder="用户组名称"
                            v-model="userGroupName"
                    />
                </a-col>
            </a-row>

            <a-row style="margin-top: 0.5em">
                <a-col :span="6">用户组类型</a-col>
                <a-col :span="16">
                    <a-select
                            style="width: 70%"
                            v-model="userGroupType"
                            :options="userGroupTypeOption"
                            placeholder="用户组类型"
                    />
                </a-col>
            </a-row>
            <a-row style="margin-top: 0.5em">
                <a-col :span="6">用户组状态</a-col>
                <a-col :span="16">
                    <a-select
                            style="width: 30%"
                            v-model="isValid"
                            :options="isValidOption"
                            placeholder="用户组状态"
                    />
                </a-col>
            </a-row>
        </a-modal>

    </div>
</template>

<script>
    import apiUserGroup from "../../api/system/UserGroup";
    // 标题行
    const columns = [
        {
            title: "序号",
            dataIndex: "no",
            width: "10%",
        },
        {
            title: "用户组名称",
            dataIndex: "userGroupName",
            width: "20%",
        },
        {
            title: "用户组类型",
            dataIndex: "userGroupType",
            scopedSlots: {customRender: "userGroupType"},
            width: "20%",
        },
        {
            title: "状态",
            dataIndex: "isValid",
            scopedSlots: {customRender: "isValid"},
            width: "10%",
        },
        {
            title: "创建时间",
            dataIndex: "createdTime",
            width: "20%",
        },
        {
            title: "操作",
            dataIndex: "id",
            scopedSlots: {customRender: "cId"},
            width: "10%",
        },
    ];

    const dataSource = [];

    const queryCondition = {
        limit: "30",
        curr: "1",
        userGroupName: "",
        userGroupType: "",
    };

    export default {
        name: "UserGroup",
        data() {
            return {
                /**表格**/
                columns: columns,
                dataSource: dataSource,
                /*分页插件*/
                pagination: {
                    showTotal: (total) => `共${total}条`,
                    total: 0,
                    current: 1,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 30,
                },
                /*表格固定头部*/
                scroll: {
                    y: 550,
                },
                tableState: {
                    rowId: -1,
                },
                allowClear: true,
                /*当前选中的行数据*/
                currRowData: "",
                /**按钮**/
                /*收费时间按钮*/
                selectId: -1,
                selectIdPop: -1,
                /**文本框**/
                userGroupTypeOption: [
                    {value: 1, label: "活动类"},
                ],
                isValidOption: [
                    {value: 0, label: "禁用"},
                    {value: 1, label: "启用"},
                ],
                title: "添加用户组",
                searchName: "",
                searchType: "",
                searchIsValid: "",
                queryCondition,
                id: "",
                userGroupName: "",
                userGroupType: 0,
                isValid: 0,
                startTime: "",
                endTime: "",
                expandedKeys: [],
                selectedKeys: [],
                /* 用户组新增和编辑弹窗 */
                dispatchPopupData: {
                    visible: false,
                    loading: false,
                },
                /* 用户组绑定用户弹窗 */
                loading: false,
                timer: null,
            };
        },

        methods: {
            /**组件部分相关方法**/
            tableChange(page) {
                this.queryCondition.curr = page.current;
                this.queryData();
                this.queryCondition.curr = 0;
            },
            customRow(record) {
                return {
                    on: {
                        // 双击点击行
                        dblclick: () => {
                            this.updateUserGroup(record);
                        },
                    },
                };
            },
            setRowClassName(record) {
                return record.id === this.tableState.rowId ? "clickRowStyl" : "";
            },

            clearSelect() {
                this.currRowData = "";
                this.tableState.rowId = "";
            },

            /* ---------------------- 条件筛选 ---------------------- */

            selectUserGroupType(value) {
                this.searchType = value;
                this.queryData();
            },
            selectIsValidType(value) {
                this.searchIsValid = value;
                this.queryData();
            },
            /** 用户组绑定用户 **/
            bindCustomer(obj) {
                let _this = this;
                _this.$router.push({
                    path: "/userGroup/bindCustomer",
                    query: { id: obj.id, userGroupName: obj.userGroupName},
                });
            },

            /** 操作相关(crud) **/
            queryData() {
                this.loading = true;
                let condition = this.getQueryCondition();
                apiUserGroup
                    .listUserGroup(condition)
                    .then((data) => {
                        let {list, total, pageNum, pageSize} = data.data;
                        let array = list || [];
                        array = array.map((item, index) => {
                            return {...item, no: total - (pageNum - 1) * pageSize - index};
                        });
                        this.dataSource = array;
                        this.pagination.total = total;
                        this.pagination.current = pageNum;
                        this.loading = false;
                    })
                    .catch((err) => {
                        console.log("获取列表异常！", err);
                        this.loading = false;
                    });
            },
            addTap() {
                this.title = "添加用户组";
                this.id = "";
                this.userGroupName = "";
                this.userGroupType = 1;
                this.isValid = 1;
                this.dispatchPopupData.visible = true;
                this.dispatchPopupData.loading = false;
            },
            updateUserGroup(record) {
                this.title = "修改用户组";
                this.id = record.id;
                this.userGroupName = record.userGroupName;
                this.userGroupType = record.userGroupType;
                this.isValid = record.isValid;
                this.dispatchPopupData.visible = true;
                this.dispatchPopupData.loading = false;
            },

            getQueryCondition() {
                let condition = this.queryCondition;
                condition.userGroupName = this.searchName;
                condition.userGroupType = this.searchType;
                condition.isValid = this.searchIsValid;
                return condition;
            },
            hideDispatchPopup() {
                this.dispatchPopupData.visible = false;
                this.id = "";
                this.userGroupName = "";
                this.userGroupType = null;
                this.isValid = null;
            },

            insertOrUpdateUserGroup() {
                let condition = {};
                //名称
                let userGroupName = this.userGroupName;
                let userGroupType = this.userGroupType;
                let isValid = this.isValid;
                if (userGroupName == "" || userGroupName == undefined) {
                    return this.$message.warn("活动名称不能为空!");
                }
                condition.id = this.id;
                condition.userGroupName = userGroupName;
                condition.userGroupType = userGroupType;
                condition.isValid = isValid;
                this.dispatchPopupData.loading = true;
                apiUserGroup
                    .insertOrUpdateUserGroup(condition)
                    .then((data) => {
                        if (data.code === 2000) {
                            this.$message.success("操作成功");
                            this.queryData();
                            this.hideDispatchPopup();
                        }
                        this.dispatchPopupData.visible = false;
                    })
                    .catch((err) => {
                        console.log("失：" + err);
                        this.$message.warn("操作失败");
                        this.dispatchPopupData.visible = false;
                    });
            },
            deleteOk(id) {
                let con = {};
                con.id = id;
                apiUserGroup
                    .deleteUserGroup(con)
                    .then((res) => {
                        if (res.code === 2000) {
                            this.$message.success("删除成功");
                            this.queryData();
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.warn("删除失败");
                    });
            },
            onExpand(keys) {
                console.log("onExpand", keys);
                // if not set autoExpandParent to false, if children expanded, parent can not collapse.
                // or, you can remove all expanded children keys.
                this.expandedKeys = keys;
                this.autoExpandParent = false;
            },
            delayedTime() {
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(this.queryData, 800);
            },
        },

        computed: {
            computedStyle() {
                return function (selectId) {
                    return this.selectId == selectId ? "" : "";
                };
            },
        },

        /*页面初始化渲染后执行*/
        mounted() {
            this.queryData();
        },
    };
</script>

<style scoped>
    .ant-table td {
        white-space: nowrap;
    }

    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 174px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /*表格行选中背景颜色*/
    .clickRowStyl {
        background-color: #c1e0fd;
    }

    .box-condition-body {
        padding-left: 40px;
        padding-right: 40px;
        background: #fff;
    }

    .box-condition-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .button_time {
        margin-left: 100px;
        display: flex;
    }

    .button_time button {
        margin-right: 10px;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-form .box-table {
        margin-top: 12px;
    }

    .box-tool button {
        margin: 0 0 0 10px;
    }

    /*轮播*/
    .modalBox {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .modalBox .playImg {
        position: relative;
        width: 60%;
    }

    .modalBox .fromBox {
        width: 35%;
    }

    .modalBox .fromBox input {
        margin-bottom: 15px;
    }

    .modalBox .playImg ul.imgList {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

    .modalBox .playImg .img {
        width: 100%;
        height: 200px;
    }

    .modalBox .playImg .img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .modalBox .playImg .pointBox {
        position: absolute;
        bottom: 10px;
        width: 100%;
    }

    .modalBox .playImg .pointBox ul {
        display: flex;
        justify-content: center;
    }

    .modalBox .playImg .pointBox li.point {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 50%;
        margin: 0 10px;
        background: #000;
    }

    .modalBox .playImg .pointBox li.active {
        background: #ff7255;
    }

    .array {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        opacity: 1;
        position: absolute;
        font-size: 30px;
    }

    .array .left,
    .array .right {
        color: #fafafa;
        cursor: pointer;
    }

    /*.array .right{color:#999;cursor:pointer}*/
    .array .left:hover {
        color: #333;
    }

    .array .right:hover {
        color: #333;
    }

    /* box-correction-popup */
    .box-correction-popup {
        padding: 20px;
        height: 555px;
        /* flex */
        display: flex;
        align-items: center;
    }

    .box-correction-popup .box-image {
        padding: 0 15px;
        width: 888px;
        height: 500px;
    }

    .box-correction-popup .box-image .icon-image {
        width: 100%;
        height: 100%;
    }

    .box-correction-popup .box-correct {
        margin: 0 15px;
        width: 310px;
        height: 500px;
    }

    .box-correction-popup .box-correct .item-correct {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .box-correction-popup .box-correct .item-correct .text-correct {
        font-weight: 300;
        font-size: 14px;
        width: 100px;
    }

    .box-correction-popup .box-correct .item-correct .text-value {
        font-weight: 300;
        font-size: 14px;
        line-height: 1.428571429;
        color: #020202;
    }

    /* box-dispatch-item */
    .box-dispatch-item {
        display: flex;
        align-items: center;
    }

    .box-dispatch-item .text-key {
        width: 200px;
        /* text */
        font-size: 14px;
        font-weight: 300;
        color: #797979;
    }

    .box-dispatch-item .text-value {
        width: 265px;
    }
</style>
